<template>
    <div style="line-height: 60px; display: flex">
        <div style="flex: 1;">
            <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>

            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
                <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">
                    {{ item.name }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-dropdown style="width: 150px; cursor: pointer;text-align: right">
            <div style="display: inline-block">
                <img :src="user.avatarUrl" alt=""
                     style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
                <span>{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;text-decoration: none;" @click="toPerson">个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;text-decoration: none" @click="toEditPassword">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <span style="display:inline-block;width:100%;display: inline-block;width: 100%;" @click="logout">退出</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        props: {
            collapseBtnClass: String,
        },
        data() {
            //这里存放数据
            return {
                user: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {}
            };
        },
        //监听属性 类似于data概念
        computed: {
            // 面包屑数据
            breadcrumb() {
                //所有嵌套路径的片段的路由记录
                let matchedArr = this.$route.matched.filter((item) => {
                    return item.path !== "" && item.path !== '/home'
                })
                console.log("当前所有的嵌套路由", matchedArr)
                return matchedArr;
            },
        },
        //监控data中的数据变化
        watch: {
            '$store.state.avatarUrl'(newVal,oldVal){
                this.user.avatarUrl = newVal
            },
        },
        //方法集合
        methods: {
            collapse() {
                this.$emit("collapse")
            },
            toPerson(){
                this.$router.replace('/person')
            },
            toEditPassword(){
                this.$router.replace('/password')
            },
            logout() {
                this.$router.replace("/login")
                localStorage.clear()
                this.$message.success("退出成功")
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            console.log(this.user)
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
        destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    };
</script>
<style scoped>

</style>
